<!-- 自定义弹框，以后父组件可以使用它，并传递一些值进来 -->

<template>
  <el-dialog
      :model-value="props.visible"
      :title="props.title"
      :width="props.width + 'px' "
      :before-close="onClose"
      draggable
      @click="dialogVisible = true"
      append-to-body
  >
   <!-- 内容: 由调用者来确定展示的内容 -->
    <div class="container" :style="{height: props.height + 'px'}">
      <slot name="content"></slot>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger"  @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

  // 定义参数类型，给props用的,其中 ? 是非必填
  import {ref} from "vue";

  interface DialogValue {
    title?: string
    visible: boolean
    width?: number
    height?: number
  }

  /**
   * defineProps:接收父组件传递的值
   * withDefaults: 给他一个默认值
   */
  const props = withDefaults(defineProps<DialogValue>(),{
      title:'标题',
      visible:false,
      width:630,
      height:280
  })


  // 注册事件（可以给父组件调用）
  const emit = defineEmits(['onClose','onConfirm'])

  // 点击子组件的取消按钮时，会通知父组件进行关闭
  const onClose = () => {
    console.log('子onClose')
    // 通知父组件关闭
    emit('onClose')
  }

  // 点击子组件的确认按钮时，会通知父组件进行确认
  const onConfirm = () => {
    // 通知父组件确认
    emit('onConfirm')
  }

  const dialogVisible = ref(false)



</script>


<style lang="scss" scoped>
.container {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.el-dialog {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  .el-dialog__header {
    margin-right: 0px;
    border-radius: 12px 12px 0 0;
    background-color: #00ff19; // 红色背景
    border-bottom: 2px solid #00ff19; // 红色边框
    padding: 15px 20px; // 增加内边距，确保标题显示
    width: 100%; // 确保头部宽度与对话框一致

    .el-dialog__title {
      color: #ffffff; // 修改文字颜色为白色，以便在红色背景上显示清晰
      font-size: 18px;
      font-weight: bold;
      display: block; // 确保标题块级显示
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #ffffff; // 修改关闭按钮颜色为白色
        font-size: 20px;
        &:hover {
          color: #ff4d4f;
        }
      }
    }
  }

  .el-dialog__body {
    padding: 20px;
    background-color: #ffffff;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8eaec;
    padding: 15px;
    text-align: right;

    .el-button {
      margin-left: 10px;
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 4px;

      &.el-button--danger {
        background-color: #ff4d4f;
        border-color: #ff4d4f;
        &:hover {
          background-color: #e53935;
          border-color: #e53935;
        }
      }

      &.el-button--primary {
        background-color: #409eff;
        border-color: #409eff;
        &:hover {
          background-color: #307ecc;
          border-color: #307ecc;
        }
      }
    }
  }
}
</style>